<script lang="ts" setup name="CallbackPatch">
	import Message from '@/components/message'
	import useStore from '@/store'
	import { useCountDown } from '@/utils/hooks'
	import { accountRule, mobileRule, codeRule, passwordRule, rePasswordRule } from '@/utils/validate'
	import { useField, useForm } from 'vee-validate'
	import { useRouter } from 'vue-router'

	const { user } = useStore()
	const router = useRouter()

	let openId = ''
	const isQQLogin = QC.Login.check()
	if (isQQLogin) {
		QC.Login.getMe((id) => {
			openId = id
		})
	}
	// 表单校验
	const { validate } = useForm({
		validationSchema: {
			account: accountRule,
			mobile: mobileRule,
			code: codeRule,
			password: passwordRule,
			rePassword: rePasswordRule,
		},
	})

	const { value: account, errorMessage: accountError } = useField<string>('account')
	const {
		value: mobile,
		errorMessage: mobileError,
		validate: validateMobile,
	} = useField<string>('mobile')
	const { value: code, errorMessage: codeError } = useField<string>('code')
	const { value: password, errorMessage: passwordError } = useField<string>('password')
	const { value: rePassword, errorMessage: rePasswordError } = useField<string>('rePassword')

	// 提交绑定
	const bind = async () => {
		const res = await validate()
		console.log(res)
		if (!res.valid) return
		const params = {
			openId,
			mobile: mobile.value,
			code: code.value,
			account: account.value,
			password: password.value,
		}
		await user.qqPatchLogin(params)
		Message.success('注册成功')
		router.push('/')
	}

	const { time, start } = useCountDown(60)
	// 发送验证码
	const send = async () => {
		if (time.value > 0) return
		const res = await validateMobile()
		if (!res.valid) return
		await user.sendQQPathMsg(mobile.value)
		Message.success('获取验证码成功')
		start()
	}
</script>
<template>
	<div class="xtx-form">
		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-user"></i>
				<input class="input" type="text" v-model="account" placeholder="请输入用户名" />
			</div>
			<div class="error">{{ accountError }}</div>
		</div>
		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-phone"></i>
				<input class="input" type="text" v-model="mobile" placeholder="请输入手机号" />
			</div>
			<div class="error">{{ mobileError }}</div>
		</div>
		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-code"></i>
				<input class="input" type="text" v-model="code" placeholder="请输入验证码" />
				<span class="code" @click="send">{{ time === 0 ? '发送验证码' : `${time}s后发送` }}</span>
			</div>
			<div class="error">{{ codeError }}</div>
		</div>
		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-lock"></i>
				<input class="input" type="password" v-model="password" placeholder="请输入密码" />
			</div>
			<div class="error">{{ passwordError }}</div>
		</div>
		<div class="xtx-form-item">
			<div class="field">
				<i class="icon iconfont icon-lock"></i>
				<input class="input" type="password" v-model="rePassword" placeholder="请确认密码" />
			</div>
			<div class="error">{{ rePasswordError }}</div>
		</div>
		<a href="javascript:;" class="submit" @click="bind">立即提交</a>
	</div>
</template>

<style scoped lang="less">
	.code {
		position: absolute;
		right: 0;
		top: 0;
		line-height: 50px;
		width: 80px;
		color: #999;
		&:hover {
			cursor: pointer;
		}
	}
</style>
